<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日微醺吧 - 制作特调</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="common.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: #f7f7f7;
            overflow: hidden;
            position: fixed;
            width: 100%;
            height: 100%;
        }
        
        .option-item {
            border-radius: 15px;
            padding: 10px 15px;
            margin: 5px;
            background-color: #f0f0f0;
            display: inline-block;
            transition: all 0.2s ease;
        }
        
        .option-item.selected {
            background-color: #07c160;
            color: white;
        }
        
        .section-title {
            position: relative;
            padding-left: 15px;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .section-title:before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 20px;
            background-color: #07c160;
            border-radius: 2px;
        }
        
        .generate-btn {
            background: linear-gradient(135deg, #36d1dc, #5b86e5);
            color: white;
            padding: 15px 30px;
            border-radius: 30px;
            font-weight: 600;
            font-size: 16px;
            box-shadow: 0 4px 10px rgba(91, 134, 229, 0.3);
            transition: all 0.3s ease;
        }
        
        .generate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(91, 134, 229, 0.4);
        }
        
        .emoji-icon {
            font-size: 24px;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="status-bar">
        <h1 class="text-lg font-medium">制作特调</h1>
    </div>
    
    <!-- 内容区域 -->
    <div class="content-area p-4">
        <!-- 页面顶部图片 -->
        <div class="card mb-5">
            <div class="relative overflow-hidden rounded-lg">
                <img src="https://images.unsplash.com/photo-1560179304-6fc1d8749b23?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1025&q=80" 
                     alt="Banner" class="w-full h-40 object-cover">
                <div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black to-transparent">
                    <p class="text-white font-medium">打造属于你的专属特调</p>
                </div>
            </div>
        </div>
        
        <!-- 情绪选择器 -->
        <div class="mb-6">
            <h2 class="section-title text-lg">心情情绪选择</h2>
            <div class="flex flex-wrap">
                <div class="option-item selected">
                    <span class="emoji-icon">😊</span>开心
                </div>
                <div class="option-item">
                    <span class="emoji-icon">😔</span>忧郁
                </div>
                <div class="option-item">
                    <span class="emoji-icon">😲</span>兴奋
                </div>
                <div class="option-item">
                    <span class="emoji-icon">😌</span>平静
                </div>
                <div class="option-item">
                    <span class="emoji-icon">😍</span>浪漫
                </div>
                <div class="option-item">
                    <span class="emoji-icon">🤔</span>思考
                </div>
            </div>
            <div class="mt-3">
                <input type="text" placeholder="其他心情描述..." class="w-full p-2 rounded-lg border border-gray-300 text-sm focus:outline-none focus:border-blue-400" />
            </div>
        </div>
        
        <!-- 味觉偏好 -->
        <div class="mb-6">
            <h2 class="section-title text-lg">味觉偏好选择</h2>
            <div class="flex flex-wrap">
                <div class="option-item selected">
                    <span class="emoji-icon">🍯</span>酸甜
                </div>
                <div class="option-item">
                    <span class="emoji-icon">🍋</span>清爽
                </div>
                <div class="option-item">
                    <span class="emoji-icon">🍫</span>浓郁
                </div>
                <div class="option-item">
                    <span class="emoji-icon">☕</span>苦涩
                </div>
                <div class="option-item">
                    <span class="emoji-icon">🌶️</span>辛辣
                </div>
                <div class="option-item">
                    <span class="emoji-icon">🍇</span>果香
                </div>
            </div>
            <div class="mt-3">
                <input type="text" placeholder="其他口味偏好..." class="w-full p-2 rounded-lg border border-gray-300 text-sm focus:outline-none focus:border-blue-400" />
            </div>
        </div>
        
        <!-- 基酒选择器 -->
        <div class="mb-8">
            <h2 class="section-title text-lg">基酒选择</h2>
            <div class="flex flex-wrap">
                <div class="option-item selected">
                    <span class="emoji-icon">🍸</span>伏特加
                </div>
                <div class="option-item">
                    <span class="emoji-icon">🥃</span>威士忌
                </div>
                <div class="option-item">
                    <span class="emoji-icon">🍹</span>朗姆酒
                </div>
                <div class="option-item">
                    <span class="emoji-icon">🍶</span>金酒
                </div>
                <div class="option-item">
                    <span class="emoji-icon">🥂</span>起泡酒
                </div>
                <div class="option-item">
                    <span class="emoji-icon">🍷</span>红酒
                </div>
            </div>
            <div class="mt-3">
                <input type="text" placeholder="其他基酒要求..." class="w-full p-2 rounded-lg border border-gray-300 text-sm focus:outline-none focus:border-blue-400" />
            </div>
        </div>
        
        <!-- 生成按钮 -->
        <div class="flex justify-center my-8">
            <button class="generate-btn flex items-center">
                <i class="fas fa-magic mr-2"></i>
                生成独家配方
            </button>
        </div>
        
        <!-- 历史记录部分 -->
        <div class="mb-8">
            <h2 class="section-title text-lg">历史配方</h2>
            <div class="card p-3 flex items-center">
                <img src="https://images.unsplash.com/photo-1551024709-8f23befc6f87?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" 
                     alt="历史配方" class="w-16 h-16 rounded-lg object-cover mr-3">
                <div>
                    <h3 class="font-medium">欢悦气泡</h3>
                    <p class="text-xs text-gray-500">起泡酒 + 柠檬汁 + 薄荷叶</p>
                </div>
                <div class="ml-auto">
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="tab-bar">
        <div class="tab-item">
            <i class="fas fa-home tab-icon"></i>
            <span>首页</span>
        </div>
        <div class="tab-item active">
            <i class="fas fa-glass-cheers tab-icon"></i>
            <span>制作特调</span>
        </div>
        <div class="tab-item">
            <i class="fas fa-user tab-icon"></i>
            <span>我的</span>
        </div>
    </div>
</body>
</html> 